<template>
  <page-view>
    <top-bar :title="title"></top-bar>
    <page-content class="p-details">
      <div class="pre-content">
        <p v-html="argeeContent"></p>
      </div>
      <van-button v-if="pay" round type="info" class="p-btn" @click="next">同意服务协议及风险提醒</van-button>
      <van-button v-if="agree" round type="info" class="p-btn" @click="goPay">同意购买</van-button>
    </page-content>
  </page-view>
</template>

<script>
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import service from '@/utils/request';

export default {
  components:{
    TopBar,
    PageView,
    PageContent
  },
  data(){
    return {
      title: '',
      argeeContent: '',
      pay: false
    }
  },
  created(){
    this.type = this.$route.params.type;
    this.init();
  },
  mounted(){
    this.getAgree();
  },
  methods: {
    init(){
      this.pay = this.type == 'RISK_AGREEMENT';
      this.agree = this.type == 'CONSENT_PURCHASE';
      switch(this.type){
        case 'REGISTER_AGREEMENT':
          this.title = '注册/服务协议';
        break;
        case 'RISK_AGREEMENT':
          this.title = '服务协议及风险提醒';
          break;
        case 'CONSENT_PURCHASE':
          this.title = '购买同意书';
        break;
      }
    },
    getAgree(){
      return service.post('/apiAgreement.do', {
        type: this.type
      }).then(res => {
        this.argeeContent = res.data
      })
    },
    next(){
      this.type = 'CONSENT_PURCHASE';
      this.init();
      this.getAgree();
    },
    goPay () {
      // this.$router.push({path:'/product/consent'})
      // 提交数据，获取订单id，传入订单详情
      this.$router.back({
        order: 2
      })
    }
  },
}
</script>

<style lang="scss" scope>
  .p-details{
    background-color: #ffffff;
  }
  .pre-content{
    padding: 10px 25px 200px;
    pre{
      font-family: PingFangSC-Medium, PingFang SC;
      font-size: 15px;
      white-space: pre-line;
      word-break: break-all;
      margin: 0;
    }
  }
  .p-btn {
    width: 335px;
    height: 57px;
    line-height: 57px;
    background: #585df9;
    border-radius: 29px;
    position: fixed;
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    bottom: 18px;
    text-align: center;
    margin: auto;
    left: 0;
    right: 0;
  }
</style>
